<template>
  <div class="main">
    <div id="storeInfo" class="left">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <h2>店铺信息</h2>
          <div class="padding-div">
            <el-select v-model="selectStore" placeholder="请输入店铺名称">
              <el-option
                v-for="item in selectStoreOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="display-flex">
            <el-button style="width: 100px;" type="primary" round @click="Dialog.addDialog = true">添加店铺</el-button>
            <el-dialog title="店铺添加" :visible.sync="Dialog.addDialog">
              <el-form :model="addForm">
                <el-form-item label="店铺编号" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.id" autocomplete="off" />
                </el-form-item>
                <el-form-item label="店铺负责人" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.storeLeader" autocomplete="off" />
                </el-form-item>
                <el-form-item label="联系电话" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.tel" autocomplete="off" />
                </el-form-item>
                <el-form-item label="店铺名称" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.storeName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="省份" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.province" autocomplete="off" />
                </el-form-item>
                <el-form-item label="市" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.city" autocomplete="off" />
                </el-form-item>
                <el-form-item label="县区" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.district" autocomplete="off" />
                </el-form-item>
                <el-form-item label="地址" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.address" autocomplete="off" />
                </el-form-item>
                <el-form-item label="经度" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.longitude" autocomplete="off" />
                </el-form-item>
                <el-form-item label="纬度" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.latitude" autocomplete="off" />
                </el-form-item>
                <el-form-item label="描述" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.description" autocomplete="off" />
                </el-form-item>
                <el-form-item label="店铺图片" :label-width="Dialog.addLabelWidth">
                  <el-input v-model="addForm.storeImage" autocomplete="off" />
                </el-form-item>
                <el-form-item label="店铺信誉" :label-width="Dialog.addLabelWidth">
                  <el-select v-model="addForm.credit" placeholder="请选择">
                    <el-option
                      v-for="item in creditSelect"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="addDialogfalse">取 消</el-button>
                <el-button type="primary" @click="addMapStoreInfo">确 定</el-button>
              </div>
            </el-dialog>
            <el-button style="width: 100px;" type="primary" round @click="selectStorebyid">查找</el-button>
          </div>
        </div>
        <div v-for="(i,j) in storeinfoList" :key="i" :index="j" class="storeinfocard" @click="storeLocation(j)">
          <!--          <img src=i.storeImage alt="dw" style="float:right;zoom:1;overflow:hidden;width:100px;height:90px;margin-left:3px;"/>-->
          <h3> {{ i.storeName }}</h3>
          <h5 class="card-title">
            <svg t="1607266167987" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2624" width="10" height="10"><path d="M772.654545 900.654545l-13.963636-4.654545C165.236364 714.472727 128 265.309091 125.672727 260.654545V232.727273l155.927273-116.363637 160.581818 209.454546-81.454545 90.763636c27.927273 95.418182 174.545455 200.145455 242.036363 242.036364l109.381819-74.472727 190.836363 169.890909-130.327273 146.618181zM172.218182 258.327273c2.327273 25.6 44.218182 416.581818 586.472727 588.8l83.781818-88.436364-128-114.036364-104.727272 69.818182-11.636364-6.981818c-9.309091-6.981818-249.018182-146.618182-279.272727-290.909091l-2.327273-11.636363 72.145454-79.127273L279.272727 183.854545l-107.054545 74.472728z" p-id="2625" fill="#606266"></path></svg>
             Tel
          </h5>
          <h5 class="card">{{ i.tel }}</h5>
          <h5 class="card-title">
            <svg t="1607266318359" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3616" width="10" height="10"><path d="M529.774592 862.656512c-31.944704-36.335616-62.631936-70.193152-92.137472-105.056256-47.425536-56.031232-91.40224-114.64704-127.34464-178.880512-18.505728-33.073152-35.090432-67.203072-41.455616-104.9088-7.589888-44.967936 0.198656-88.590336 18.642944-129.685504 39.48544-87.984128 107.450368-141.385728 202.575872-156.946432 140.591104-22.99904 273.600512 74.059776 299.030528 214.89664 9.019392 49.944576-0.710656 95.913984-21.899264 140.701696-28.166144 59.523072-64.505856 113.9712-105.82016 164.829184-40.189952 49.46944-82.921472 96.876544-124.493824 145.227776-2.197504 2.555904-3.97312 5.46816-7.098368 9.822208z m-1.077248-36.780032c32.37888-38.012928 62.912512-72.462336 91.875328-108.183552 45.348864-55.932928 87.478272-114.132992 119.740416-178.92352 20.508672-41.183232 31.51872-83.6096 23.66464-130.2016-26.222592-155.547648-195.196928-242.958336-337.580032-175.038464-97.589248 46.55104-177.307648 180.5824-106.205184 308.85888 25.856 46.6432 53.32992 92.076032 86.24128 133.87776 39.196672 49.782784 80.121856 98.2016 122.263552 149.610496z" fill="#606266" p-id="3617"></path><path d="M383.133696 447.574016c-0.008192-81.594368 65.083392-146.536448 146.827264-146.487296 80.95744 0.049152 145.958912 65.202176 145.9712 146.317312 0.016384 81.604608-65.067008 146.532352-146.827264 146.481152-80.963584-0.047104-145.963008-65.19808-145.9712-146.311168z m145.917952 120.180736c66.942976 0.17408 120.393728-52.62336 120.75008-119.267328 0.3584-67.457024-52.62336-121.090048-119.783424-121.257984-66.94912-0.169984-120.399872 52.631552-120.743936 119.273472-0.350208 67.463168 52.61312 121.079808 119.77728 121.25184z" fill="#606266" p-id="3618"></path></svg>
            Add</h5>
          <h5 class="card">{{ i.address }}</h5>
          <h5 class="introduce">{{ i.description }}</h5>
          <div class="card-button">
            <i class="el-icon-edit" @click="editDialogTrue(i)"></i>
            <el-dialog title="店铺信息修改" :visible.sync="Dialog.editDialog">
              <el-form :model="editForm">
                <el-form-item label="店铺编号" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.id" autocomplete="off" :disabled="true" />
                </el-form-item>
                <el-form-item label="店铺负责人" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.storeLeader" autocomplete="off" />
                </el-form-item>
                <el-form-item label="联系电话" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.tel" autocomplete="off" />
                </el-form-item>
                <el-form-item label="店铺名称" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.storeName" autocomplete="off" />
                </el-form-item>
                <el-form-item label="省份" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.province" autocomplete="off" />
                </el-form-item>
                <el-form-item label="市" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.city" autocomplete="off" />
                </el-form-item>
                <el-form-item label="县区" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.district" autocomplete="off" />
                </el-form-item>
                <el-form-item label="地址" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.address" autocomplete="off" />
                </el-form-item>
                <el-form-item label="经度" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.longitude" autocomplete="off" />
                </el-form-item>
                <el-form-item label="纬度" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.latitude" autocomplete="off" />
                </el-form-item>
                <el-form-item label="描述" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.description" autocomplete="off" />
                </el-form-item>
                <el-form-item label="店铺图片" :label-width="Dialog.editLabelWidth">
                  <el-input v-model="editForm.storeImage" autocomplete="off" />
                </el-form-item>
                <el-form-item label="店铺信誉" :label-width="Dialog.editLabelWidth">
                  <el-select v-model="editForm.credit" placeholder="请选择">
                    <el-option
                      v-for="item in creditSelect"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="Dialog.editDialog = false">取 消</el-button>
                <el-button type="primary" @click="editMapStoreInfo">确 定</el-button>
              </div>
            </el-dialog>
            <i class="el-icon-delete" @click="deleteStoreinfo(i)"></i>
          </div>
        </div>
      </el-card>
    </div>
    <div id="allmap" style="overflow: hidden; zoom: 1; position: relative;" class="right">
      <div
        id="map"
        style="height: 100vh; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'StoreMap',
  data() {
    return {
      creditSelect: [{
        value: '1',
        label: '信誉好'
      },
      {
        value: '0',
        label: '信誉坏'
      }],
      point: [],
      markers: [],
      selectStore: '',
      selectStoreOptions: [],
      Dialog: {
        addDialog: false,
        addLabelWidth: '100px',
        editDialog: false,
        editLabelWidth: '100px'
      },
      addForm: {
        id: '',
        storeLeader: '',
        tel: '',
        storeName: '',
        province: '',
        city: '',
        district: '',
        address: '',
        longitude: '',
        latitude: '',
        description: '',
        storeImage: '',
        credit: ''
      },
      editForm: {
        id: '',
        storeLeader: '',
        tel: '',
        storeName: '',
        province: '',
        city: '',
        district: '',
        address: '',
        longitude: '',
        latitude: '',
        description: '',
        storeImage: '',
        credit: ''
      },
      info: [],
      searchInfoWindow: [],
      icons: [],
      storeinfoList: []
    }
  },
  mounted: function() {
    var point = [] // 存放标注点经纬信息的数组
    var markers = [] // 存放标注点对象的数组
    var info = []// 存放提示信息窗口对象的数组
    var searchInfoWindow = [] // 存放检索信息窗口对象的数组
    var icons = [] // 定义图标
    // 百度地图API功能
    // eslint-disable-next-line no-undef
    var map = new BMap.Map('map')
    // BMap.InfoWindow().disableCloseOnClick();
    map.setDefaultCursor('pointer') // 设置地图默认的鼠标指针样式
    // eslint-disable-next-line no-undef
    point = new BMap.Point('116.378473', '37.444063') // 地图中心点
    map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别。

    map.enableScrollWheelZoom(true) // 启用滚轮放大缩小 ，默认禁用。
    // 地图、卫星、混合模式切换
    // eslint-disable-next-line no-undef
    map.addControl(new BMap.MapTypeControl({
      // eslint-disable-next-line no-undef
      mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP
      ]
    }))
    // 向地图中添加缩放控件
    var ctrlNav = new window.BMap.NavigationControl({
      // eslint-disable-next-line no-undef
      anchor: BMAP_ANCHOR_TOP_LEFT,
      // eslint-disable-next-line no-undef
      type: BMAP_NAVIGATION_CONTROL_LARGE
    })
    map.addControl(ctrlNav)
    // 向地图中添加缩略图控件
    var ctrlOve = new window.BMap.OverviewMapControl({
      // eslint-disable-next-line no-undef
      anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
      isOpen: 1
    })
    map.addControl(ctrlOve)
    // 向地图中添加比例尺控件
    var ctrlSca = new window.BMap.ScaleControl({
      // eslint-disable-next-line no-undef
      anchor: BMAP_ANCHOR_BOTTOM_LEFT
    })
    map.addControl(ctrlSca)
    this.$axios.get(`system/storeinfo/listJson`)
      .then(res => {
        // eslint-disable-next-line no-empty
        if (res.data.code !== 200) {
        } else {
          var i
          var json = res.data.data
          console.log(json)
          this.storeinfoList = res.data.data
          for (i = 0; i < json.length; i++) {
            this.selectStoreOptions.push({ 'label': json[i].storeName, 'value': json[i].id })
            //  alert(json[i].longitude)
            // eslint-disable-next-line no-undef
            var poi = new BMap.Point(json[i].longitude, json[i].latitude)
            point[i] = poi
            // 标注图标

            if (json[i].credit === '1') {
              // eslint-disable-next-line no-undef
              icons[i] = new BMap.Icon(require('@/images/positionGood.png'), new BMap.Size(23, 23), {
                // eslint-disable-next-line no-undef
                offset: new BMap.Size(10, 25)
              })
            } else {
              // eslint-disable-next-line no-undef
              icons[i] = new BMap.Icon(require('@/images/positionBad.png'), new BMap.Size(23, 23), {
                // eslint-disable-next-line no-undef
                offset: new BMap.Size(10, 25)
              })
            }
            // eslint-disable-next-line no-undef
            var marker = new BMap.Marker(poi, {
              icon: icons[i]
            }) // 创建marker对象
            markers[i] = marker
            var mapTitle = json[i].storeName
            // eslint-disable-next-line no-unused-vars
            var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
                                    '<img src="' + json[i].storeImage + '" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:90px;margin-left:3px;"/>' +
                                    '地址：' + json[i].address + '<br/>电话：' + json[i].tel + '<br/>简介：' + (json[i].description ? json[i].description : '') +
                                    '</div>'
            info[i] = content
            // eslint-disable-next-line no-undef
            searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
              title: mapTitle, // 标题
              width: 290, // 宽度
              height: 105, // 高度
              panel: 'panel', // 检索结果面板
              enableAutoPan: true, // 自动平移
              // eslint-disable-next-line no-undef
              searchTypes: [BMAPLIB_TAB_SEARCH, // 周边检索
                // eslint-disable-next-line no-undef
                BMAPLIB_TAB_TO_HERE, // 到这里去
                // eslint-disable-next-line no-undef
                BMAPLIB_TAB_FROM_HERE // 从这里出发
              ]

            })

            // eslint-disable-next-line no-undef
            var label = new BMap.Label(json[i].storeName, {
              // eslint-disable-next-line no-undef
              offset: new BMap.Size(20, 0)
            }) // 创建marker点的标记,这里注意下,因为百度地图可以对label样式做编辑,所以我这里吧重要的id放在了label(然后再隐藏)

            // eslint-disable-next-line no-undef
            label.setStyle({
              display: 'none',
              background: 'none',
              border: 'none' // 只要对label样式进行设置就可达到在标注图标上显示数字的效果
            })
            /*   label.setStyle({
                                                               display: "none"
                                                           }); //对label 样式隐藏
                                                          */

            // eslint-disable-next-line no-undef
            markers[i].setLabel(label) // 把label设置到maker上
            // marker.enableDragging(); //marker可拖拽
            markers[i].setTitle(json[i].storeName) // 这里设置maker的title (鼠标放到marker点上,会出现它的title,所以我这里把name,放到title里)

            // 添加点击事件
            markers[i].addEventListener('click', (function(k) {
              // js 闭包
              return function() {
                // 将被点击marker置为中心
                map.centerAndZoom(point[k], 12)
                // 在marker上打开检索信息窗口
                searchInfoWindow[k].open(markers[k])
              }
            })(i))
            map.addOverlay(markers[i]) // 在地图中添加marker(打点)
          }
          // eslint-disable-next-line no-undef
          // $('#storeInfo').html(storeInfo)
        }
        this.point = point
        this.markers = markers
        this.info = info
        this.searchInfoWindow = searchInfoWindow
        this.icons = icons
      }
      )
  },
  methods: {
    selectStorebyid: function() {
      var i
      for (i = 0; i < this.storeinfoList.length; i++) {
        if (this.storeinfoList[i].id === this.selectStore) {
          this.storeLocation(i)
          break
        } else {
          if (i === this.storeinfoList.length - 1) {
            this.$message({
              type: 'error',
              message: '没有此店铺'
            })
          }
        }
      }
    },
    deleteStoreinfo: function(i) {
      const loading = this.$loading({
        lock: true,
        text: '删除中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      var data = new URLSearchParams()
      data.append('ids', i.id)
      this.$axios.post(`system/storeinfo/remove`, data)
        .then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.message
            })
            loading.close()
          }
          if (res.data.code === 500) {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
    },
    editDialogTrue: function(i) {
      this.editForm.id = i.id
      this.editForm.storeLeader = i.storeLeader
      this.editForm.tel = i.tel
      this.editForm.storeName = i.storeName
      this.editForm.province = i.province
      this.editForm.city = i.city
      this.editForm.district = i.district
      this.editForm.address = i.address
      this.editForm.longitude = i.longitude
      this.editForm.latitude = i.latitude
      this.editForm.description = i.description
      this.editForm.storeImage = i.storeImage
      this.editForm.credit = i.credit
      this.Dialog.editDialog = true
    },
    editMapStoreInfo: function() {
      var data = new URLSearchParams()
      data.append('id', this.editForm.id)
      data.append('storeLeader', this.editForm.storeLeader)
      data.append('tel', this.editForm.tel)
      data.append('storeName', this.editForm.storeName)
      data.append('province', this.editForm.province)
      data.append('city', this.editForm.city)
      data.append('district', this.editForm.district)
      data.append('address', this.editForm.address)
      data.append('longitude', this.editForm.longitude)
      data.append('latitude', this.editForm.latitude)
      data.append('description', this.editForm.description)
      data.append('storeImage', this.editForm.storeImage)
      data.append('credit', this.editForm.credit)
      this.$axios.post(`system/storeinfo/edit`, data)
        .then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.message
            })
          }
          if (res.data.code === 500) {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
      this.Dialog.editDialog = false
    },
    addDialogfalse: function() {
      this.addForm.id = ''
      this.addForm.id = ''
      this.addForm.storeLeader = ''
      this.addForm.tel = ''
      this.addForm.storeName = ''
      this.addForm.province = ''
      this.addForm.city = ''
      this.addForm.district = ''
      this.addForm.address = ''
      this.addForm.longitude = ''
      this.addForm.latitude = ''
      this.addForm.description = ''
      this.addForm.storeImage = ''
      this.addForm.credit = ''
      this.Dialog.addDialog = false
    },
    addMapStoreInfo: function() {
      var data = new URLSearchParams()
      data.append('id', this.addForm.id)
      data.append('storeLeader', this.addForm.storeLeader)
      data.append('tel', this.addForm.tel)
      data.append('storeName', this.addForm.storeName)
      data.append('province', this.addForm.province)
      data.append('city', this.addForm.city)
      data.append('district', this.addForm.district)
      data.append('address', this.addForm.address)
      data.append('longitude', this.addForm.longitude)
      data.append('latitude', this.addForm.latitude)
      data.append('description', this.addForm.description)
      data.append('storeImage', this.addForm.storeImage)
      data.append('credit', this.addForm.credit)
      this.$axios.post(`system/storeinfo/add`, data)
        .then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.message
            })
          }
          if (res.data.code === 500) {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
      this.addDialogfalse()
    },
    getMapStoreInfo: function() {
      this.$axios.get(`system/storeinfo/listJson`)
        .then(res => {
          if (res.data.code === 200) {
            this.storeinfoList = res.data.data
            console.log(this.storeinfoList)
          }
        })
    },
    storeLocation(i) {
      // eslint-disable-next-line no-undef
      var map = new BMap.Map('map')
      map.setDefaultCursor('pointer') // 设置地图默认的鼠标指针样式
      // eslint-disable-next-line no-undef,no-unused-vars
      var point = new BMap.Point(this.storeinfoList[i].longitude, this.storeinfoList[i].latitude) // 地图中心点
      map.centerAndZoom(this.point[i], 12) // 初始化地图,设置中心点坐标和地图级别。
      map.enableScrollWheelZoom(true) // 启用滚轮放大缩小 ，默认禁用。
      // 地图、卫星、混合模式切换
      // eslint-disable-next-line no-undef
      map.addControl(new BMap.MapTypeControl({
        // eslint-disable-next-line no-undef
        mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP
        ]
      }))
      // 向地图中添加缩放控件
      var ctrlNav = new window.BMap.NavigationControl({
        // eslint-disable-next-line no-undef
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // eslint-disable-next-line no-undef
        type: BMAP_NAVIGATION_CONTROL_LARGE
      })
      map.addControl(ctrlNav)
      // 向地图中添加缩略图控件
      var ctrlOve = new window.BMap.OverviewMapControl({
        // eslint-disable-next-line no-undef
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
        isOpen: 1
      })
      map.addControl(ctrlOve)
      // 向地图中添加比例尺控件
      var ctrlSca = new window.BMap.ScaleControl({
        // eslint-disable-next-line no-undef
        anchor: BMAP_ANCHOR_BOTTOM_LEFT
      })
      map.addControl(ctrlSca)
      // eslint-disable-next-line no-undef
      // eslint-disable-next-line no-undef
      var poi = new BMap.Point(this.storeinfoList[i].longitude, this.storeinfoList[i].latitude)
      // 标注图标
      // eslint-disable-next-line no-undef,no-unused-vars
      var marker = new BMap.Marker(poi, {
        icon: this.icons[i]
      }) // 创建marker对象
      var mapTitle = this.storeinfoList[i].storeName
      // eslint-disable-next-line no-undef
      var searchInfoWindow = new BMapLib.SearchInfoWindow(map, this.info[i], {
        title: mapTitle, // 标题
        width: 290, // 宽度
        height: 105, // 高度
        panel: 'panel', // 检索结果面板
        enableAutoPan: true, // 自动平移
        // eslint-disable-next-line no-undef
        searchTypes: [BMAPLIB_TAB_SEARCH, // 周边检索
          // eslint-disable-next-line no-undef
          BMAPLIB_TAB_TO_HERE, // 到这里去
          // eslint-disable-next-line no-undef
          BMAPLIB_TAB_FROM_HERE // 从这里出发
        ]
      })

      // eslint-disable-next-line no-undef
      var label = new BMap.Label(this.storeinfoList[i].storeName, {
        // eslint-disable-next-line no-undef
        offset: new BMap.Size(20, 0)
      }) // 创建marker点的标记,这里注意下,因为百度地图可以对label样式做编辑,所以我这里吧重要的id放在了label(然后再隐藏)

      // eslint-disable-next-line no-undef
      label.setStyle({
        background: 'none',
        border: 'none' // 只要对label样式进行设置就可达到在标注图标上显示数字的效果
      })
      /*   label.setStyle({
                                       display: "none"
                                   }); //对label 样式隐藏
                                  */

      // eslint-disable-next-line no-undef
      marker.setLabel(label) // 把label设置到maker上
      // marker.enableDragging(); //marker可拖拽
      marker.setTitle(this.storeinfoList[i].storeName) // 这里设置maker的title (鼠标放到marker点上,会出现它的title,所以我这里把name,放到title里)

      // 添加点击事件
      marker.addEventListener('click', (function(marker) {
        // js 闭包
        return function() {
          // 将被点击marker置为中心
          // eslint-disable-next-line no-undef
          map.centerAndZoom(poi, 12)
          // 在marker上打开检索信息窗口
          // eslint-disable-next-line no-undef
          searchInfoWindow.open(marker)
        }
      })(i))
      map.addOverlay(marker) // 在地图中添加marker(打点)
    }
  }
}

</script>

<style scoped>
  .display-flex{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
  }
  #allmap {
    /*margin-right: 300px;*/
    height: 100%;
    overflow: hidden;
  }

  .main #result {
    border-left: 1px dotted #999;
    height: 100%;
    width: 295px;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 12px;
  }

  .main dl,
  .main dt,
  .main dd,
  .main ul,
  .main li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main dt {
    font-size: 14px;
    font-family: "微软雅黑";
    font-weight: bold;
    border-bottom: 1px dotted #000;
    padding: 5px 0 5px 5px;
    margin: 5px 0;
  }

  .main dd {
    padding: 5px 0 0 5px;
  }

  .main li {
    line-height: 28px;
  }

  .main {
    display: flex;
    height: 100%;
  }

  .main .left {
    /*flex: 0 0 auto;*/
    /*background-color: #999;*/
    width: 300px;
    height: 100vh;
    overflow: scroll;
  }

  .main .right {
    flex: 1 1 auto;
  }
  .storeinfocard{
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
    padding: 30px 15px 5px 15px;
    margin-bottom: 15px;
    font-size: 1rem;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    font-weight: 600;
    color: #4b4b5a;
  }
  .padding-div{
    padding: 5px 7px;
    text-align: center;
  }
  .storeinfocard h3{
    text-align: center;
    font-size: 1.05rem;
    margin: 0;
    padding: 0;
  }
  .card-title{
    padding: 5px;
    margin-bottom: 0;
    margin-top: 10px;
    color: #606266;
    font-size: 0.75rem;
    font-weight: 400;
    border-bottom: 1px solid #dfe6ec;
  }
  .card{
    padding: 5px;
    margin-bottom: 0;
    margin-top: 5px;
    color: #777;
    font-size: 0.85rem;
    font-weight: 400;
  }
  .introduce{
    margin-bottom: 0;
    color: #B4B4B4;
    margin-top: 10px;
    font-size: 0.65rem;
    font-weight: 400;
    text-indent:2em;
  }
  .card-button{
    padding-top: 10px;
    text-align: center;
  }
  .card-button i{
    margin-right: 20px;
    color: #B4B4B4;
  }
</style>
